<template>
	<view class="cardholder_add_warp">
		<Header leftPathType="navigateTo" leftPath="/pages/cardholder/cardholder" :title="$t('mine.cardholder.add.title')"/>
		<view class="cardholder_add_content_">
			<view class="_content_step_">
				<view class="_content_step_item">
					<view :class="stepCurrent >= 1 ?'_content_step_item_y _content_step_item_y_sel':'_content_step_item_y'">1</view>
					<view class="_content_step_item_t">{{$t("mine.cardholder.add.step.1")}}</view>
				</view>
				<view :class="stepCurrent >= 2?'_content_step_item_fg _content_step_item_fg_sel':'_content_step_item_fg'" ></view>
				<view class="_content_step_item">
					<view :class="stepCurrent >= 2 ?'_content_step_item_y _content_step_item_y_sel':'_content_step_item_y'">2</view>
					<view class="_content_step_item_t">{{$t("mine.cardholder.add.step.2")}}</view>
				</view>
				<view :class="stepCurrent >= 3?'_content_step_item_fg _content_step_item_fg_sel':'_content_step_item_fg'" ></view>
				<view class="_content_step_item">
					<view :class="stepCurrent >= 3 ?'_content_step_item_y _content_step_item_y_sel':'_content_step_item_y'">3</view>
					<view class="_content_step_item_t">{{$t("mine.cardholder.add.step.3")}}</view>
				</view>
			</view>
			<!-- 步骤一 -->
			<view v-if="stepCurrent ===1" class="_step_content">
				<view class="form_content_item">
					<view class="form_content_item_title">{{$t('mine.cardholder.add.name')}}</view>
					<up-input
						:placeholder="$t('mine.cardholder.add.name.placeholder')"
						border="surround"
						v-model="form.lastName"
						:customStyle="inputCss"
						clearable
					>
					</up-input>
					<view class="form_content_item_msg">{{$t('mine.cardholder.add.name1.verification')}}</view>
				</view>
				<view class="form_content_item">
					<view class="form_content_item_title">{{$t('mine.cardholder.add.firstName')}}</view>
					<up-input
						:placeholder="$t('mine.cardholder.add.firstName.placeholder')"
						border="surround"
						v-model="form.firstName"
						:customStyle="inputCss"
						clearable
						@change="firstNameChange"
					>
					</up-input>
					<view class="form_content_item_msg">{{$t('mine.cardholder.add.name2.verification')}}</view>
				</view>
				<view class="form_content_item">
					<view class="form_content_item_title">{{$t('common.mobile')}}</view>
					<view class="moblie_">
						<view @click="phoneCountryShow = true;" class="moblie_phone_country">
							{{phoneCountrySel && Object.keys(phoneCountrySel).length !==0 ? phoneCountrySel.key : $t('common.select')}}
							<up-image v-if="phoneCountryShow" src="/static/comm/but.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
							<up-image v-else src="/static/comm/right_2.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
						</view>
						<up-input
							:placeholder="$t('common.mobile.placeholder')"
							border="surround"
							v-model="form.phone"
							:customStyle="inputCss"
							clearable
						></up-input>
					</view>
				</view>
			</view>
			<!-- 步骤二 -->
			<view v-if="stepCurrent ===2" class="_step_content">
				<view class="form_content_item">
					<view class="form_content_item_title">{{$t('mine.cardholder.add.nationality')}}</view>
					<view class="form_content_item_s" @click="dictCountryShow = true;">
						<view>{{dictCountrySel && Object.keys(dictCountrySel).length !==0 ? dictCountrySel.dictLabel:$t('common.select')}}</view>
						<up-image src="/static/comm/right_h.png" width="16" height="16" bgColor="#f1f6ff00"></up-image>
					</view>
				</view>
				<view class="form_content_item">
					<view class="form_content_item_title">{{$t('mine.cardholder.add.country')}}</view>
					<view class="form_content_item_s" @click="cascadeRegionShow = true;">
					  	<view>{{cascadeRegionSel && Object.keys(cascadeRegionSel).length !==0 ? cascadeRegionSel.dictLabel:$t('common.select')}}</view>
					  	<up-image src="/static/comm/right_h.png" width="16" height="16" bgColor="#f1f6ff00"></up-image>
					</view>
				</view>
				<view class="form_content_item">
					<view class="form_content_item_title">{{$t('mine.cardholder.add.city')}}</view>
					<up-input
						:placeholder="$t('mine.cardholder.add.city.placeholder')"
						border="surround"
						v-model="form.addrCity"
						:customStyle="inputCss"
						clearable
					  >
					  </up-input>
				</view>
				<view class="form_content_item">
					<view class="form_content_item_title">{{$t('mine.cardholder.add.address')}}</view>
					<up-input
						:placeholder="$t('mine.cardholder.add.address.placeholder')"
						border="surround"
						v-model="form.address"
						:customStyle="inputCss"
						clearable
					  >
					  </up-input>
				</view>
				<view class="form_content_item">
					<view class="form_content_item_title">{{$t('mine.cardholder.add.postal.code')}}</view>
					<up-input
						:placeholder="$t('mine.cardholder.add.postal.code.placeholder')"
						border="surround"
						v-model="form.postalCode"
						:customStyle="inputCss"
						clearable
					  >
					  </up-input>
				</view>
			</view>
			<!-- 步骤三 -->
			<view v-if="stepCurrent ===3" class="_step_content">
				<view class="form_content_item">
					<view class="form_content_item_title">{{$t('mine.cardholder.add.email')}}</view>
					<up-input
						:placeholder="$t('mine.cardholder.add.email.placeholder')"
						border="surround"
						v-model="form.email"
						:customStyle="inputCss"
						clearable
					  >
					  </up-input>
				</view>
				<view class="form_content_item">
					<view class="form_content_item_title">{{$t('common.verification.code')}}</view>
					<InputCodeComm @getCode="getEmailCode" :codeNumberRef="form.email" :type="SMS_TYPE.ADD_CARD_OWNER"/>
					<view class="email-msg-warp">{{$t('common.email.msg')}}</view>
				</view>
			</view>
			<view class="but_comm_warp" @click="checkStepClick('next')" v-if="stepCurrent<3">
				{{$t('common.next.step')}}
			</view>
			<view class="but_comm_warp" @click="stepOkFun" v-else>
				{{$t('mine.cardholder.add.but')}}
			</view>
			<view class="last_step_but_comm_warp" @click="checkStepClick('last')" v-if="stepCurrent>1">
				{{$t("common.last.step")}}
			</view>
		</view>
		<!-- 国码选择 -->
		<up-picker
			:show="phoneCountryShow" 
			ref="uPickerRef" 
			:columns="phoneCountryOption" 
			@confirm="phoneCountryConfirm" 
			keyName="key"
			itemHeight="34"
			@cancel="phoneCountryShow=false"
			@close="phoneCountryShow=false"
			:cancelText="$t('common.confirm')"
			:confirmText="$t('common.cancel')"
		></up-picker>
		<!-- 国籍选择 -->
		<up-picker
			:show="dictCountryShow" 
			ref="uPickerRef" 
			:columns="dictCountryOption" 
			@confirm="dictCountryConfirm" 
			keyName="dictLabel"
			itemHeight="34"
			@cancel="dictCountryShow=false"
			@close="dictCountryShow=false"
			:cancelText="$t('common.confirm')"
			:confirmText="$t('common.cancel')"
		></up-picker>
		<!-- 国家选择 -->
		<up-picker
			:show="cascadeRegionShow" 
			ref="uPickerRef" 
			:columns="dictCountryOption" 
			@confirm="cascadeRegionConfirm" 
			keyName="dictLabel"
			itemHeight="34"
			@cancel="cascadeRegionShow=false"
			@close="cascadeRegionShow=false"
			:cancelText="$t('common.confirm')"
			:confirmText="$t('common.cancel')"
		></up-picker>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import Header from '@/components/header_comm2.vue';
	import { addCardOwner } from '@/api/card.js';
	import { getPhoneCountryCode,getDictCountry } from '@/api/common.js';
	import InputCodeComm from '@/components/input-code-comm.vue';
	import { SMS_TYPE } from '@/utils/enumUtils.js';
	import { removeSpaces } from '@/utils/index.js';
	
	export default {
		components:{Header,InputCodeComm},
		data() {
			return {
				stepCurrent:1,// 步骤
				form:{
					firstName:null,// 姓氏
					lastName:null,// 名字
					phoneCode:null,// 手机号国码
					phone:null,// 手机号
					country:null,// 国籍
					addrCountry:null,// 居住国家
					addrCity:null,// 居住城市
					address:null,// 居住地址
					postalCode:null,// 邮政编码
					email:null,// 邮箱
					emailCode:null,// 邮箱验证码
				},
				inputCss:{
					"height":'80rpx',
					"background": "#F3F3F3FF",
					"border-radius": "20rpx",
					"border": "0rpx",
					"padding-left": "16px",
				},
				phoneCountryOption:[],
				phoneCountryShow:false,
				phoneCountrySel:{},
				dictCountryShow:false,// 国籍
				dictCountryOption:[],// 国籍
				dictCountrySel:{},// 国籍
				cascadeRegionShow:false,// 国家
				cascadeRegionSel:{},// 国家
				cascadeRegionOption:[],// 国家
			};
		},
		computed: {
		   SMS_TYPE() {
		     return SMS_TYPE;
		   }
		 },
		mounted() {
			this.getDictCountryFun();
			this.getPhoneCountryCode();
		},
		methods: {
			firstNameChange(value){
				const valueNew = value.replace(/[^a-zA-Z\s]/g, '');
				console.log("valueNew",valueNew);
				// this.form.firstName = valueNew;
				this.$set(this.form, 'firstName', valueNew);
			},
			/**
			 * 查询国籍
			 */
			async getDictCountryFun(){
				const resp = await getDictCountry();
				if(resp && resp.bizcode === 100){
					const data = resp.data;
					this.dictCountryOption = [data] || [];
				}
			},
			/**
			 * 查询国码
			 */
			async getPhoneCountryCode(){
				const resp = await getPhoneCountryCode();
				if(resp && resp.bizcode === 100){
					const data = resp.data;
					if(data && data.length !==0){
						this.phoneCountrySel = data[0];
						this.form.phoneCode = data[0].value;
					}
					this.phoneCountryOption = [data] || [];
				}
			},
			/**
			 * 选择国码
			 * @param {Object} item
			 */
			phoneCountryConfirm(item){
				const selectData = item.value[0];
				this.phoneCountrySel = selectData;
				this.form.phoneCode = selectData.value;
				this.phoneCountryShow = false;
			},
			// 下一步
			checkStepClick(step){
				let stepCurrent = this.stepCurrent;
				if(step === "next"){
					const checkResult = this.checkParams(stepCurrent);
					if(checkResult){
						stepCurrent = stepCurrent+1;
					}
				}else if(step === "last"){
					stepCurrent = stepCurrent-1;
				}
				this.stepCurrent = stepCurrent;
			},
			checkParams(step){
				const form = this.form;
				// 第一步
				if(step === 1){
					const lastName = form.lastName ? form.lastName.trimStart() : '';
					if(!lastName){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('mine.cardholder.add.name.placeholder'),
						});
						return false;
					}
					if(lastName){
						const regex = /^[A-Za-z\s]+$/;
						if(!regex.test(lastName)){
							this.$refs.uToastRef.show({
								type: 'error',
								message: "名字只能为字母，空格",
							});
							return false;
						}
					}
					const firstName = form.firstName ? form.firstName.trimStart() : '';
					if(!firstName){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('mine.cardholder.add.firstName.placeholder'),
						});
						return false;
					}
					if(firstName){
						const regex = /^[A-Za-z\s]+$/;
						if(!regex.test(firstName)){
							this.$refs.uToastRef.show({
								type: 'error',
								message: "姓氏只能为字母，空格",
							});
							return false;
						}
					}
					if(!form.phoneCode){
						this.$refs.uToastRef.show({
							type: 'error',
							message: "请选择国码",
						});
						return false;
					}
					if(!form.phone){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('common.mobile.placeholder'),
						});
						return false;
					}
				}else if(step === 2){
					if(!form.country){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('mine.cardholder.add.nationality.placeholder'),
						});
						return false;
					}
					if(!form.addrCountry){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('mine.cardholder.add.country.placeholder'),
						});
						return false;
					}
					if(!form.addrCity){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('mine.cardholder.add.city.placeholder'),
						});
						return false;
					}
					if(!form.address){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('mine.cardholder.add.address.placeholder'),
						});
						return false;
					}
					if(!form.postalCode){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('mine.cardholder.add.postal.code.placeholder'),
						});
						return false;
					}
				}else if(step === 3){
					if(!form.email){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('mine.cardholder.add.email.placeholder'),
						});
						return false;
					}
					if(!form.emailCode){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('common.verification.code.placeholder'),
						});
						return false;
					}
				}
				
				return true;
			},
			
			/**
			 * 创建持卡人
			 */
			async stepOkFun(){
				this.checkParams(3);
				const params = this.form;
				const resp = await addCardOwner(params);
				if(resp && resp.bizcode === 100){
					this.$refs.uToastRef.show({
						type: 'success',
						message: this.$t('mine.cardholder.add.but.ok'),
					});
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/mine/mine",
						})
					},1500)
				}
			},
			// 获取邮箱验证码
			getEmailCode(code){
				if(code){
					this.form.emailCode = code;
				}
			},
			dictCountryConfirm(item){
				const selectData = item.value[0]
				this.dictCountrySel = selectData;
				this.form.country = selectData.dictValue;
				this.dictCountryShow = false;
			},
			cascadeRegionConfirm(item){
				const selectData = item.value[0]
				this.cascadeRegionSel = selectData;
				this.form.addrCountry = selectData.dictValue;
				this.cascadeRegionShow = false;
			}
		}
	}
</script>

<style lang="scss">
.cardholder_add_warp{
	height: calc(100vh - 0rpx);
	.cardholder_add_content_{
		padding: 30rpx;
		._content_step_{
			display: flex;
			justify-content: space-between;
			align-items: center;
			._content_step_item{
				display: grid;
				justify-content: center;
			}
			._content_step_item_y{
				width: 80rpx;
				height: 80rpx;
				background: #EEEEEE;
				border-radius: 50%;
				font-weight: bold;
				font-size: 36rpx;
				color: #666666;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 16%;
			}
			._content_step_item_y_sel{
				background: $app-policy-color;
				color: #FFFFFF;
			}
			._content_step_item_t{
				font-size: 24rpx;
				color: #333333;
				margin-top: 10rpx;
			}
			._content_step_item_fg{
				width: 135rpx;
				height: 2rpx;
				border-top: 2px solid #CCCCCC;
			}
			._content_step_item_fg_sel{
				border-top: 2px solid $app-policy-color;
			}
		}
		
		._step_content{
			margin-top: 40rpx;
		}
		.but_comm_warp{
			margin-top: 80rpx;
		}
		.last_step_but_comm_warp{
			margin-top: 20rpx;
		}
	}
}
</style>
